<template>
  <div id="app">
    <div class="userInfo" v-if="userStatus">
      <div class="userImg">
        <img src="@/assets/avatar.png" alt="" />
      </div>
      <p class="userName">好客_646112</p>
      <van-button type="primary" size="small" @click="btndeng">退出</van-button>
    </div>

    <div class="userInfo" v-else>
      <div class="userImg">
        <img src="@/assets/avatar.png" alt="" />
      </div>
      <p class="userName">游客</p>
      <van-button type="primary" size="small" @click="btndengs"
        >去登录</van-button
      >
    </div>

    <van-grid :column-num="3" :border="false">
      <van-grid-item to="/mycollection" icon="star-o" text="我的收藏" />
      <van-grid-item to="/MyRental" icon="wap-home-o" text="我的出租" />
      <van-grid-item icon="eye-o" text="看房记录" />
      <van-grid-item icon="apps-o" text="成为房主" />
      <van-grid-item icon="friends-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>

    <!-- banner广告区域 -->
    <div class="bannerAd_my">
      <img src="@/assets/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/storage";
import { Dialog } from "vant";
import { theuse } from "@/api/user";
import { delToken } from "@/utils/storage";
export default {
  name: "MyCom",
  components: {},
  props: {},
  data() {
    return {
      renderData: [],
      userStatus: false,
    };
  },
  computed: {},
  watch: {},
  async created() {
    const data = await theuse();
    console.log(data);
    this.renderData = [...this.renderData, data.body];
    if (getToken()) {
      this.userStatus = true;
    }
  },
  methods: {
    btndeng() {
      Dialog.confirm({
        title: "退出登录",
        message: "确认退出登录吗？",
      })
        .then(() => {
          this.$router.push("/login");
          delToken();
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    btndengs() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  min-height: 500px;
  background: url("@/assets/bg.png") no-repeat center top;
  background-size: contain;
  overflow: hidden;

  .userInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 300px;
    height: 170px;
    margin: 140px auto 20px;
    background-color: #fff;
    box-shadow: 2px 2px 15px 0px rgb(100 101 102 / 12%);

    .userImg {
      margin-top: -80px;
      width: 90px;
      height: 90px;
      background-color: #eee;
      border: 4px solid #fff;
      box-shadow: 0 0 10px 3px #ddd;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }

  .bannerAd_my {
    margin: 14px auto;
    width: 84%;
    height: 70px;
    background-color: #999;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
